<div id="imageSearch">
	Suche nach Bildern:
	<input id="imageSearchText" type="text" onkeyup="{literal}javascript:if(event.keyCode == 13){searchImageList();}{/literal}" />
	<input type="button" value="Bild suchen" onclick="javascript:searchImageList();" />

	<div id="imageSearchStatus"></div>
</div>
<div id="imageList">
	Bitte Suchbegriff eingeben, um nach Bildern zu suchen.
</div>

<div id="imageUpload">
	<form action="?view=image&action=new" method="POST" enctype="multipart/form-data">
		<table cellpadding="4">
			<tr>
				<td>Datei:</td>
				<td>
					<input type="file" id="imageFile" name="imageFile" />
				</td>
				<td>
					<input type="submit" id="submitImageFile" name="submitImageFile" value="Bild hochladen" />
				</td>
			</tr>
		</table>
	</form>
</div>

<!-- image search client script -->
<script type="text/javascript">
var imageList = new Array();
{foreach from=$imageList item=imageItem}
	var tImage = new Object();
	tImage["filetitle"] = "{$imageItem.filetitle}";
	tImage["ext"] = "{$imageItem.ext}";
	tImage["thumb_url"] = "{$imageItem.thumb_url}";
	tImage["url"] = "{$imageItem.url}";
	tImage["title"] = "{$imageItem.title}";
	imageList.push(tImage);
{/foreach}

{literal}
function searchImageList(){
	var searchTerm = document.getElementById("imageSearchText").value.toLowerCase();
	var foundList = new Array();
	/* iterate through all images and check whether 
		filetitle, title or url contain the search term*/
	for(var i=0;i<imageList.length;i++){
		if(imageList[i]["filetitle"].toLowerCase().indexOf(searchTerm)>=0
			||imageList[i]["title"].toLowerCase().indexOf(searchTerm)>=0
			||imageList[i]["url"].toLowerCase().indexOf(searchTerm)>=0){
			/* this image matches the search term, add to result list */
			foundList.push(imageList[i]);
		}
	}

	/* show a message when list is empty, or draw it if not */
	if(foundList.length==0){
		document.getElementById("imageList").innerHTML = "Es wurde kein Bild "
									+ "zum Suchbegriff '<b>"+searchTerm+"</b>' gefunden.";
	}else{
		drawImageList(searchTerm,foundList);
	}
}

function drawImageList(searchTerm,newImageList){
	var html = "";

	for(var f=0;f<newImageList.length;f++){
		var imageItem = newImageList[f];
		html += "<div class=\"imageItem\" style=\"background-image:url('"+imageItem["thumb_url"]+"');\">"
			+ "<div class=\"imageItemTitle\">"
			+ "<div class=\"imageItemDelete\" onclick=\"javascript:deleteImage"
			+ "('"+imageItem["filetitle"]+"."+imageItem["ext"]+"');\">X</div>"
			+ "<a href=\""+imageItem["url"]+"\" target=\"_blank\">"+imageItem["title"]+"</a>"
			+ "</div></div>";
	}

	document.getElementById("imageList").innerHTML = html;
	document.getElementById("imageSearchStatus").innerHTML = "<b>"+ newImageList.length 
			+ " von " + imageList.length + "</b> für <i>\"<b>" + searchTerm + "</b>\"</i> gefunden";
}
{/literal}
</script>
